<template>
	<view class="content">
  vue3
	
		<uni-card>
			<text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
		</uni-card>
		<!-- :markers="wxMarkers"  :polyline="polyline" :include-points='points' -->
		<!-- <view class="page-section page-section-gap">
		  				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
		  				</map>
		  			</view> -->
					<map id="myMap" style="width: 100%; height: 60vh;" 
							></map>
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	<!-- 	<view class="content">
		    <van-button type="primary">默认按钮</van-button>
		  </view> -->
		 <button style="margin-top:100rpx" open-type="getAuthorize" scope="userInfo" @getAuthorize="getOpenUserInfo" @error="getInfoError">
		  			个人信息授权
		  		</button>
		  
		  		<button style="margin-top:100rpx" open-type="getAuthorize" scope='phoneNumber' @getAuthorize="getPhoneNumber" error="getPhoneError">
		  			手机号码授权
		  		</button>
				<text>count:{{count}}</text>
				<button @click="alipay()">支付宝支付</button>
				
				<button @click="authorize()">支付宝小程序api授权</button>
				  <!-- #ifdef MP-ALIPAY -->
				<text>canIUseAuthButton:{{canIUseAuthButton}}</text>
				 <!-- #endif -->
       
         <!-- <van-button type="primary">主要按钮</van-button>
          <van-button type="success">成功按钮</van-button>
          <van-button type="default">默认按钮</van-button>
          <van-button type="warning">警告按钮</van-button>
          <van-button type="danger">危险按钮</van-button> -->
          <!-- #ifdef MP-ALIPAY -->
          <!-- <van-button type="primary">按钮</van-button> -->
					<!-- <van-button type="primary">按钮11</van-button> -->
          <!-- #endif -->
	</view>
</template>

<script>
	import axios from 'axios'
	import { mapState } from 'vuex'//引入mapState
	export default {
		data() {
			return {
				 // #ifdef MP-ALIPAY
				 canIUseAuthButton: my.canIUse('button.open-type.getAuthorize'),
				   // #endif
				title: 'Hello',
				// 地图
			// id:0, // 使用 marker点击事件 需要填写id
			// title: 'map',
			// latitude: 39.909,
			// longitude: 116.39742,
			// covers: [{
			// 	latitude: 39.909,
			// 	longitude: 116.39742,
			// 	// iconPath: '../../../static/location.png'
			// 	iconPath: '../../../static/logo.png'
			// }, {
			// 	latitude: 39.90,
			// 	longitude: 116.39,
			// 	// iconPath: '../../../static/location.png'
			// 	iconPath: '../../../static/logo.png'
			// }]
			}
		},
		// computed: {
		// 			username() {
		// 				return this.$store.state.username 
		// 			}
		// 		},
		computed: mapState({
				    // 从state中拿到数据 箭头函数可使代码更简练（就是简写）
				    count: state => state.count,
				}),
		onLoad() {
			 // this.loadList()
			 // this.alipay()
			 this.getData();
		},
		methods: {
			 // loadList() {
			 //            this.$request('/api/productList/list').then(res => {
			 //                    console.log(res,'res in loadList')
			 //            })
			 //    },
			// 封装抽离出去
			// 接口请求
			getData(){
				axios.get('/api/productList/list').then(res=>{
				           console.log(res,'res')
				        })
				// uni.request({
				// 	method:'get',
				//   // url: 'https://fc.zzx9.cn/test/test', //仅为示例，并非真实接口地址。
        //   // 代理
        //   // url: '/api/test/test', //仅为示例，并非真实接口地址。
				// 	  url: '/api/productList/list', //仅为示例，并非真实接口地址。
				// 		// data:{
						
				// 		// },
				// 	//  header: {
				// 	//         // 'custom-header': 'hello' //自定义请求头信息
				// 	//     },
				//     success: (res) => {
				//         console.log(res.data,'res.data');
				//         // this.text = 'request success';
				//     },
				// 	fail:(err)=>{
				// 		// reject(err)
				// 		console.log(err,'err')
				// 	}
				// });
			
			},
// 触发
			getOpenUserInfo() {
				uni.getOpenUserInfo({
					success: (res) => {
						let userinfo = JSON.parse(res.response).response
						console.log(userinfo,'userinfo')
						uni.showToast({
							title: "授权个人信息成功"
						});
					},
					fail: res => {
						console.log(res,'res---faile')
						uni.showToast({
							title: "授权个人信息失败"
						});
					}
				});
			},
			// 授权失败回调
			getInfoError() {
				uni.showToast({
					title: "取消授权个人信息"
				});
			},
			getPhoneNumber() {
				uni.getPhoneNumber({
					success: (res) => {
						let encryptedData = res.response;
						console.log(encryptedData,'encryptedData')
						uni.showToast({
							title: "获得手机号码加密数据成功"
						});
						uni.request({
							url: '开发者的后端服务端',
							data: encryptedData,
						});
					},
					fail: (res) => {
						console.log(res,'res')
						uni.showToast({
							title: "授权手机号码失败"
						});
					},
				});
			},
			getPhoneError() {
				uni.showToast({
					title: "取消手机号码授权"
				});
			},
			// 支付
			alipay(){
				 // #ifdef MP-ALIPAY
				 uni.requestPayment({
				     provider: 'alipay',
				     orderInfo: 'orderInfo', //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
				     success: function (res) {
				         console.log('success:' + JSON.stringify(res));
				     },
				     fail: function (err) {
				         console.log('fail:' + JSON.stringify(err));
				     }
				 });
				 // #endif
				
			},
			// 和支付宝小程序 是一致的 
			authorize(){
				 // #ifdef MP-ALIPAY
				  my.getAuthCode({
				       scopes: 'auth_user',
				       success: ({ authCode }) => {
				         console.log(authCode,'authCode')
				         my.alert({
				           content: authCode,
				         });
				       },
				     });
					// #endif
			}
		

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
